<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>变量及数据类型</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <div class="box"></div>
    <script>
      // 一 声明变量的方式
      // 1 使用var 全局变量，会成为window对象的属性，不可使用delete指令删除
      var t = 20

      // 2 使用let 声明的变量不会成为window对象的属性 不可使用delete指令删除
      let n = 'tom'
      // 删除n
      delete t //不报错也不删除

      // 3 直接声明变量并赋值 可使用delete指令删除
      m = false
      // delete m // 可删除

      // 4 使用const声明常量,不可以重新赋值
      const PI = 3.14
      // PI = 3.1415926 // 不可以重新赋值,否则报错
      // 控制台输出变量
      console.log('n =', n, 't=', t, 'm=', m, 'area=', PI * 3 * 3)

      // 二 数据类型 基本数据类型 引用数据类型(object)
      // 1 基本数据类型 number boolean undefined bigint null string symbol
      // 2 引用数据类型 object
      // 3 js的数据类型是通过变量的值来确定
      // 4 使用typeof 来测试数据类型
      let num = 23.4
      console.log('num=' + num + '的数据类型是:', typeof num)
      let bool = 1 > 2
      console.log('bool=' + bool + '的数据类型是:', typeof bool)
      let und
      console.log('und=' + und + '的数据类型是:', typeof und)
      let nul = null
      console.log('nul=' + nul + '的数据类型是:', typeof nul) //虽然typeof结果是object,但是归类为null类型
      let str = `hello ${num}` // 模板字符串 hello 23.4
      console.log(`str='${str}'的数据类型是:${typeof str}`)
      let bigNum = 1n
      console.log(`bigNum=${bigNum}的数据类型是:${typeof bigNum}`)
      let sym = Symbol() // 表示独一无二的变量
      console.log(sym, typeof sym) // Symbol() 'symbol'
      let obj = { id: 1, name: 'tom' }
      console.log(`obj=${obj}的数据类型是:${typeof obj}`) // obj=[object Object]的数据类型是:object
      let arr = [1, 2, 3, 'a']
      console.log(`arr=${arr}的数据类型是:${typeof arr}`)
    </script>
  </body>
</html>
